<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">
		<style>
			.mui-content{
				padding: 5px;
			}
			.info{
				float: left;
				margin: 5px 0;
				width: 100%;
				padding: 5px;
				border: 1px solid #ccc;
				background-color: #fff;
				box-shadow: 2px 2px 3px #ccc;
			}
			.left {
				width: 80px;	
			}
			td {
				font-size: 14px;
				font-weight: 400;
				padding-left: 15px;
				color: #333;
			}
			.right {
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">代收快递查询</h1>
		</header>

		<div class="mui-content" style="background: white;" id="parent">
			
		</div>
		
		<script id="tmpl" type="text/html">
			{{each datas as value i}}
				<div class="info">
					<h5 style="font-weight: 700; color: #333; font-size: 16px;padding-left: 5px;">
						{{value.allNum}}
						<span class="mui-badge mui-badge-success">{{value.statusMsg}}</span>
					</h5> 
					<table>
						<tr>
							<td class="left">申请时间</td>
							<td class="right">{{value.createTime}}</td>
						</tr>
						<tr>
							<td class="left">联系人</td>
							<td class="right">{{value.contactName}}</td>
						</tr>
						<tr>
							<td class="left">电话</td>
							<td class="right">{{value.contactCellphone}}</td>
						</tr>
					</table>
				</div>
	        {{/each}}
		</script>

	</body>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/template.js"></script>
	<script src="../../js/app.js"></script>
	<script src="../../js/_API.js"></script>
	<script>
		mui.init();
		
		load = function(json){
			var config = {
				INIT : "等待代签收",
				SIGN : "已代签收，请尽早到服务点领取",
				EDN : "已完成"
			}
			for(var i=0; i<json.pv.datas.length; i++) {
				var d = json.pv.datas[i];
				d.statusMsg = config[d.status];
			}
			var html = template('tmpl', json.pv);
			document.getElementById('parent').innerHTML = html;
		}
		//load({"code":0,"msg":"success","pv":{"currentpage":1,"datas":[{"createTime":"2015-03-16 14:24:18","contactCellphone":"15339222437","peopleId":"123456789012345678901234567890123456","id":"666b824f-1135-4758-b104-113142ab553f","content":"阻拦住哪","contactName":"Gaollg","removed":"N","houseId":"12cfd09e-5183-489e-a012-94f1b4af10a7","communityId":"c844cfdf-ffe4-4219-a575-586b793e72de"}],"pagesize":10,"total":1,"totalpage":1}});
		
		mui.plusReady(function(){
			_API.ajax2("express/pageByPeople")
			.success(function(json){
				load(json)
			})
			.error(function(json){
				alert(JSON.stringify(json)); 
			})
		});
		
	</script>
</html>